<div xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:nxl="http://nuxeo.org/nxforms/layout"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:a4j="http://richfaces.org/a4j">

  <h1>
    <h:outputText value="#{groupManagementActions.selectedGroup.id}" />
  </h1>

  <a4j:outputPanel id="groupDetailsPanel" layout="block">

  <h:form>
    <p class="action_bar directoryBack">
      <h:commandLink immediate="true"
        action="#{groupManagementActions.toggleShowUserOrGroup}">
        <h:graphicImage value="/icons/arrow_left.gif" />
        <h:outputText value="#{messages['command.directoryBack']}" />
        <f:ajax execute="@this" render="groupsPanel"
          actionListener="#{jsfResetActions.resetComponents}" />
      </h:commandLink>
    </p>
  </h:form>

  <h:form id="deleteGroupForm" rendered="#{groupManagementActions.allowDeleteGroup and notReadOnly}">
    <h:outputScript target="#{pageJsTarget}">
    function confirmDeleteGroup() {
      return confirm("#{messages['label.userManager.confirmDeleteGroup']}");
    }
    </h:outputScript>
    <div class="action_bar">
      <ul>
        <li class="selected">
          <h:commandLink
            action="#{groupManagementActions.deleteGroup}"
            onclick="if (!confirmDeleteGroup()) { return false; }">
            <h:graphicImage value="/icons/delete.png" />
            <h:outputText value="#{messages['command.delete']}" />
            <f:ajax execute="@this" render="groupsPanel" />
          </h:commandLink>
        </li>
      </ul>
    </div>
    <div style="clear: both" />
  </h:form>

  <div class="tabsBar subtabsBar">
    <h:form>
      <ul>
        <li class="#{nxu:test(groupManagementActions.detailsMode == 'view', 'selected', '')}">
          <h:commandLink action="#{groupManagementActions.setDetailsMode('view')}"
            immediate="true">
            <h:outputText value="#{messages['label.groupManager.viewGroup']}" />
            <f:ajax execute="@this" render=":viewGroupView:groupDetailsPanel" />
          </h:commandLink>
        </li>

        <c:if test="#{groupManagementActions.allowEditGroup and notReadOnly}">
          <li class="#{nxu:test(groupManagementActions.detailsMode == 'edit', 'selected', '')}">
            <h:commandLink
              action="#{groupManagementActions.setDetailsMode('edit')}" immediate="true">
              <h:outputText value="#{messages['label.groupManager.editGroup']}" />
              <f:ajax execute="@this" render=":viewGroupView:groupDetailsPanel" />
            </h:commandLink>
          </li>
        </c:if>
      </ul>
    </h:form>
  </div>
  <div style="clear: both" />

  <div class="tabsContent">

    <c:if test="#{groupManagementActions.detailsMode == 'view'}">
    <h:form id="viewGroup">
      <nxl:layout name="group" mode="view" value="#{groupManagementActions.selectedGroup}" />
    </h:form>
    </c:if>

    <c:if test="#{groupManagementActions.detailsMode == 'edit' and groupManagementActions.allowEditGroup and notReadOnly}">
    <h:form id="editGroup">
      <h:outputScript target="#{pageJsTarget}">
         jQuery(document).ready(function() {
           jQuery('#viewGroupView\\:editGroup').focusFirst();
         });
      </h:outputScript>
      <nxl:layout name="group" mode="edit" value="#{groupManagementActions.selectedGroup}" />
      <table class="dataInput">
        <tbody>
          <tr>
            <td class="iconColumn"></td>
            <td class="labelColumn">
              <h:commandButton
                value="#{messages['command.save']}"
                action="#{groupManagementActions.updateGroup}"
                styleClass="button"
                render="groupDetailsPanel,facesStatusMessagePanel">
                <f:ajax execute="@form" render=":viewGroupView:groupDetailsPanel facesStatusMessagePanel" />
              </h:commandButton>
            </td>
            <td class="fieldColumn"></td>
          </tr>
        </tbody>
      </table>
    </h:form>
    </c:if>

  </div>
  </a4j:outputPanel>

</div>
